<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <%@ include file="../common/header.jsp" %>
    <script src="/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <%@ include file="../common/top.jsp" %>

    <div class="row">
        <div class="col-sm-3">
            <c:set var="menu" value="chart"/>
            <%@ include file="../common/menu.jsp" %>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">客户报表</h1>
                </div>
            </div>
<!-- 高级查询 -->
            <form class="form-inline" id="searchForm" action="/chart/list.do" method="post">
                <div class="form-group">
                    <label>销售员:</label>
                    <input type="text" class="form-control" name="keyword" style="width: 150px"
                           value="${(qo.keyword)}" placeholder="请输入销售员姓名">
                </div>
                <div class="form-group">
                    <label>时间:</label>
                    <input class="form-control" name="beginDate" style="width: 125px"
                    	   value="<fmt:formatDate value="${qo.beginDate}" pattern="yyyy-MM-dd"/>" 
                    	   placeholder="请输入开始时间" type="text" readonly> ~
                    <input class="form-control" name="endDate" style="width: 125px"
                    	   value="<fmt:formatDate value="${qo.endDate}" pattern="yyyy-MM-dd"/>" 
                    	   placeholder="请输入结束时间" type="text" readonly>
                           
                </div>
                <div class="form-group">
                    <label>分组类型:</label>
                    <select class="form-control" name="groupType">
                        <option value="seller.name">销售员</option>
                        <option value="DATE_FORMAT(c.inputTime, '%Y')">年份</option>
                        <option value="DATE_FORMAT(c.inputTime, '%Y-%m')">月份</option>
                        <option value="DATE_FORMAT(c.inputTime, '%Y-%m-%d')">日期</option>
                    </select>
                    <script>
                        $("#searchForm select[name='groupType']").val("${qo.groupType}");
                    </script>
                </div>
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
                <a role="button" class="btn btn-success barBtn">
                    <span class="glyphicon glyphicon-film"></span> 柱状图
                </a>
                <a role="button" class="btn btn-success pieBtn">
                    <span class="glyphicon glyphicon-film"></span> 饼状图
                </a>
            </form>

            <table class="table table-striped table-hover" >
                <tr>
                    <th>编号</th>
                    <th>分组类型</th>
                    <th>客户数量</th>
                </tr>
                <c:forEach var="entity" items="${list}">
                    <tr>
                        <td>${entity_index + 1}</td>
                        <td>${entity.groupType}</td>
                        <td>${entity.num}</td>
                    </tr>
				</c:forEach>
            </table>
        </div>
    </div>
</div>

<!-- 显示报表 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
<!-- 表图动态显示到模态框中 -->
        <div class="modal-content"></div>
    </div>
</div>

<script>
    $(function () {
        //日历插件
        $("#searchForm input[name='beginDate']").click(function () {
            WdatePicker({
                readOnly: true, //只读
                maxDate: new Date() //最多选到今天
            });
        });
        $("#searchForm input[name='endDate']").click(function () {
            WdatePicker({
                readOnly: true, //只读
                minDate: $("#searchForm input[name='beginDate']").val(),
                maxDate: new Date() //最多选到今天
            });
        });
        
        //显示柱状图
        $(".barBtn").click(function() {
        	var url = "/chart/queryBar.do";
        	showModal(url);
        });

        //显示饼状图
        $(".pieBtn").click(function() {
        	var url = "/chart/queryPie.do";
        	showModal(url);
        });
    });
    
    function showModal(url) {
        //先清除模态框的缓存
        $("#chartModal").removeData("bs.modal");
        //再发送请求
        $("#chartModal").modal({
            remote: url
        });
    }
</script>
</body>
</html>